<template>
  <n-config-provider style="height: 100%; width: 100%" :theme="null">
    <div class="main">
      <div>
        <n-menu
        v-model:value="activeKey"
        mode="horizontal"
        :options="menuOptions"
        responsive/>
      </div>
      <RouterView class="view" />
    </div>
  </n-config-provider>
</template>

<script setup lang="jsx">

import {
  Home as HomeIcon,
  Flag as FlagIcon
} from '@vicons/ionicons5'

import {   ref } from 'vue'
import { NIcon } from 'naive-ui'
import { RouterLink } from "vue-router";



const activeKey = ref('home')


const menuOptions = [
{
    label: () =>(<RouterLink to='/' >首页</RouterLink>),
    key: 'home',
    icon: ()=> (<NIcon><HomeIcon/></NIcon>)
  },
  {
    label: () =>(<RouterLink to='/about' >关于</RouterLink>),
    key: 'about',
    icon: ()=> (<NIcon><FlagIcon/></NIcon>)
  }
  

]

</script>

<style lang="css" scoped>
.main {
  display: flex;
  flex-direction:column;
  height: 100%;
}
.view{
  flex-grow: 1;

}
</style>
